<template>
    <el-dialog :title="usetitle.title" width="50% !important" :visible.sync="showHide" :show-close="false"
        :close-on-click-modal="false">
        <el-form :model="params">
            <template v-if="usetitle.title == '修改密码'">
                <el-form-item label="新密码" :label-width="formLabelWidth">
                    <el-input v-model="newpwd" @blur="Defocus1" autocomplete="off" type="password" show-password></el-input>
                    <transition name="el-zoom-in-bottom">
                        <div v-show="errorShow" style="display: flex; color:red; height:10px ;margin-top:-10px"
                            class="transition-box">{{ errorTxt }}</div>
                    </transition>
                </el-form-item>
                <el-form-item label="再次确定" :label-width="formLabelWidth">
                    <el-input v-model="newpwd1" @input="Defocus2" autocomplete="off" type="password"
                        show-password></el-input>
                    <transition name="el-zoom-in-bottom">
                        <div v-show="show1" style="display: flex; color:red; height:10px ;margin-top:-10px"
                            class="transition-box">填写错误</div>
                    </transition>
                </el-form-item>
            </template>
            <template v-if="usetitle.title == '添加用户'">
                <el-form-item :label="usetitle.userId" :label-width="formLabelWidth">
                    <el-input v-model="params.userId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :label="usetitle.detail" :label-width="formLabelWidth">
                    <el-input v-model="params.detail" autocomplete="off"></el-input>
                </el-form-item>
            </template>
            <template v-if="usetitle.title == '修改用户信息' || usetitle.title == '添加用户'">
                <el-form-item :label="usetitle.roleId" :label-width="formLabelWidth">
                    <el-select v-model="params.roleId" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.roleId" :label="item.roleName" :value="item.roleId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="usetitle.isApp" :label-width="formLabelWidth">
                    <template>
                        <el-radio v-model="params.isApp" :label="true">开启</el-radio>
                        <el-radio v-model="params.isApp" :label="false">未开启</el-radio>
                    </template>
                </el-form-item>
                <el-form-item :label="usetitle.isPhone" :label-width="formLabelWidth">
                    <template>
                        <el-radio v-model="params.isPhone" :label="true">开启</el-radio>
                        <el-radio v-model="params.isPhone" :label="false">未开启</el-radio>
                    </template>
                </el-form-item>
                <el-form-item :label="usetitle.isSms" :label-width="formLabelWidth">
                    <template>
                        <el-radio v-model="params.isSms" :label="true">开启</el-radio>
                        <el-radio v-model="params.isSms" :label="false">未开启</el-radio>
                    </template>
                    <!-- <el-select v-model="params.isSms" placeholder="请选择">
                        <el-option label="开启" :value=true></el-option>
                        <el-option label="未开启" :value=false></el-option>
                    </el-select> -->
                </el-form-item>
            </template>
            <template v-if="usetitle.title == '添加用户'">
                <el-form-item :label="usetitle.pwd" :label-width="formLabelWidth">
                    <el-input v-model="params.pwd" autocomplete="off"></el-input>
                </el-form-item>
            </template>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="devClose1">取 消</el-button>
            <el-button type="primary" @click="devClose">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getData } from '@/api/table'
import { Message } from 'element-ui'
export default {
    data() {
        return {
            errorTxt: '',
            errorShow: false,
            formdata: '',
            show: false,
            show1: false,
            formLabelWidth: '120px',
            // 新密码
            newpwd: '',
            newpwd1: '',
            // 选中的值
            selectedValue: '',
            options: [ // 下拉选项数组
                { roleName: '', roleId: '' },
            ],
            // 定时器
            timer: '',
            timer1: ''
        };
    },
    props: {
        // 传递的数据
        params: {
            type: Object,
            required: true
        },
        // 显示隐藏
        showHide: {
            type: Boolean,
            required: true
        },
        // 传递的input的title
        usetitle: {
            type: Object,
            required: true
        }
    },
    methods: {
        Defocus1() {
            let englishtest = /(?=.*[a-z])/
            let pswLength = /(?=.*[a-z])[a-zA-Z\d]{4,16}/
            if (this.newpwd !== '') {
                this.errorTxt = ''
                this.errorShow = false
                if (englishtest.test(this.newpwd) == false) {
                    this.errorTxt = '密码必须包含英文字母'
                    this.errorShow = true
                } else {
                    this.errorTxt = ''
                    this.errorShow = false
                    if (pswLength.test(this.newpwd) == false) {
                        this.errorTxt = '密码长度应为4~16位'
                        this.errorShow = true
                    } else {
                        this.errorTxt = ''
                        this.errorShow = false
                    }
                }
            } else {
                this.errorTxt = '密码不能为空'
                this.errorShow = true
            }
            // console.log(englishtest.test(this.newpwd));
            // console.log(this.newpwd);
        },
        Defocus2() {
            if (this.newpwd !== this.newpwd1) {
                this.show1 = true
            } else {
                this.show1 = false
            }
            if (this.newpwd1 == '') {
                this.show1 = false
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        devClose1() {
            // console.log(this.params);
            this.$emit('custom-event', false);
            this.newpwd = '';
            this.newpwd1 = '';
            this.errorShow = false
        },
        devClose() {
            let url = ''
            this.formdata = new FormData();
            // 据来源设置接口路径
            if (this.usetitle.title == '修改密码') {
                url = '/user/updatePassword'
                if (this.newpwd1 == '') {
                    this.show1 = true;
                    return
                }
                this.formdata.append('userId', this.params.userId)
                this.formdata.append('password', this.newpwd1)
            } else if (this.usetitle.title == '修改用户信息') {
                url = '/user/update';
                this.formdata.append('params', JSON.stringify(this.params))
            } else if (this.usetitle.title == '添加用户') {
                url = '/user/save';
                this.formdata.append('params', JSON.stringify(this.params))
            }
            // 是否显示弹窗传给父组件
            if (this.usetitle.title == '修改密码') {
                if (this.newpwd1 !== this.newpwd) {
                    Message({
                        message: '修改密码不一致',
                        type: 'waring',
                        duration: 5 * 1000
                    })
                } else {
                    getData(url, 'POST', this.formdata).then(res => {
                        Message({
                            message: res.msg,
                            type: 'success',
                            duration: 5 * 1000
                        })
                    })
                    this.newpwd = '';
                    this.newpwd1 = '';
                    this.errorShow = false;
                    this.$emit('custom-event', false);
                }
            } else {
                getData(url, 'POST', this.formdata).then(res => {
                    Message({
                        message: res.msg,
                        type: 'success',
                        duration: 5 * 1000
                    })
                })
                this.$emit('custom-event', false);
            }
        }
    },
    created() {
        let url = '/role/list'
        getData(url, 'get').then(res => {
            this.options = res.msg
        })
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer);
        };
        if (this.timer1) {
            clearInterval(this.timer1);
        }
    }
};
</script>